<template>
	<view class="page">
		<tabControl :current="current" :values="items" bgc="#fff" :fixed="true" :scrollFlag='true' :isEqually='true'
			@clickItem="onClickItem" @searchValue="search"></tabControl>
		<!-- 使用 swiper 配合 滑动切换 -->
		<swiper class="swiper" style="height: 100%;margin-top: -90rpx;" @change='scollSwiper' :current='current'>
			<swiper-item v-for="(item,index) in items" :key='index'>
				<scroll-view scroll-y style="height: 100%" @scrolltolower="loadMoreData">
					<view class="contener">
						<view class="contener700">
							<view class="orderListbox" v-for="(item,index) in orderList" :key="index">
								<!-- 商家标题 -->
								<view class="between center_vertical">
									<!-- 商家头像和店铺名称 -->
									<view class="center_vertical" v-if="item.storeName">
										<image class="storeAvatar" :src="imgapi+item.storeAvatar"></image>
										<text>{{item.storeName}}</text>
									</view>
									<text v-else>平台自营</text>
									<rich-text :nodes="getStatus(item.status)" style="font-size: 32rpx;"></rich-text>
								</view>
								
								<!-- 商品信息 -->
								<view class="orderListxinxi" v-for="(childItem,index) in item.snapshot" :key="index">
									<view>
										<image class="orderListboximg" :src="childItem.avatar"></image>
									</view>
									<view style="margin-left: 15rpx;">
										<view style="margin-top: 5rpx;">
											<!-- 标题 -->
											<view class="between2">
												<view class="titFont">
													<view class=" line-clamp2">
														{{childItem.title}}
													</view>
													<view class="overview textOver" >{{childItem.overview}}</view>
												</view>
												
												<view style="margin-right: 15rpx;" class="num">
													x{{childItem.count}}
												</view>
											</view>
											<!-- <view class="snapshot textOver">
												简介，这里也优化一下样式，放在标题的下面，然后字数长就自动换行和展示.....省略号 
												<text>{{childItem.overview}}</text>
											</view> -->
										</view>
									</view>
								</view>
								<!-- 订单合计 -->
								<view class="orderListprice">
									<view>
										合计:<text style="color: #ff7a05;margin-left: 10rpx;">￥{{totalPrice(item)}}</text>
									</view>
									<view class="paybtnBox">
										<button class="paybtn greenborder" @tap="tzorderDetails(item)"
											v-if="item.status==0">立即支付</button>
										<!-- 这里样式改一下，改成红框 然后两个按钮尺寸都改小一点 -->
										<button class="paybtn redborder" v-if="item.status==0"
											@click="cancelOrder(item.orderNum)">取消订单</button>
										<button @tap="tzorderDetails(item)" class="paybtn balckborder"
											v-else>订单详情</button>
									</view>
								</view>
							</view>
							<uni-load-more :status="status" :icon-size="14" :content-text="contentText" />
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>
<script>
	import tabControl from '@/components/tabControl-tag/tabControl-tag.vue';
	export default {
		components: {
			tabControl
		},
		data() {
			return {
				orderList: [],
				
				items: ['全部', '待付款', '待收货', '待评价', '已完成', '已取消'],
				current: 0,
				ifBottomRefresh: false,
				contentText: {
					contentdown: '上拉加载更多~',
					contentrefresh: '加载中',
					contentnomore: '暂无更多~'
				},
				params: {
					pageNo: 1,
					pageSize: 10,
					type: 1,
					status: ""
				},
				imgapi: "",
				status: 'more',
				viewHeight: 0,
				timer: null,
			};
		},
		onBackPress(e) {
			uni.switchTab({
				url: './mineInfo'
			});
			return true
		},
		onShow() {
			this.getList()
		},
		onLoad() {
			this.getList()
    },
		//触底加载状态
		onReachBottom() {
			this.loadMoreData()
		},

		computed: {

		},
		methods: {
			// 底部刷新
			loadMoreData() {
				// 防止多次触发,节流
				if (!this.timer) {
					this.timer = setTimeout(() => {
						if (this.status != 'noMore') {
							console.log("触底")
							this.status = 'loading';
							this.ifBottomRefresh = true
							//正式服去掉这个延时器
							this.getList()
						} else {
							console.log('123')
							this.status = "noMore"
						}
						this.timer = null
					}, 500)
				}
			},

			//总价
			totalPrice(item) {
				let priceItem = 0
				item.snapshot.forEach(items => {
					priceItem += (items.price * items.count)
				})
				// console.log('item.snapshot',item.snapshot)
				// console.log('priceItem',priceItem)
				return priceItem
			},
			//搜索框的值
			search(e) {
				console.log('eee', e)
			},
			tzorderDetails(item) {
				let items = JSON.stringify(item)
				console.log('1', items)
				uni.navigateTo({
					url: `shopOrderDetails?item=${items}`
				})
			},
			cancelOrder(orderNum) {
				let _this = this
				uni.showModal({
					title: '取消订单',
					content: '确定取消该采摘订单吗',
					success: function(res) {
						console.log(res)
						if (res.confirm) {
							_this.$axios({
								url: "user/shopMall/cancelOrder",
								method: "post",
								data: {
									orderNum: orderNum,
								}
							}).then((res) => {
								uni.showToast({
									title: res.result,
									icon: 'none',
									duration: 2000,
									success() {
										console.log('2333', _this.params);
										let status = _this.params.status
										_this.cleanList()
										_this.params.status = status
										_this.getList()
										/* // 刷新页面
										uni.navigateTo({
											url: './shopOrder'
										}) */
									}
								})



							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			// 清空数据
			cleanList() {
				this.orderList = [];
				this.params = {
					pageNo: 1,
					pageSize: 10,
					type: 1
				}
				this.status = 'loading';
				this.ifBottomRefresh = true
			},
			getStatus(status) {
				
				switch (status) {
					case 0:
						return "<font style='color: #4e4e4e'>待付款</font>"
					case 1:
						return "<font style='color: #139e4c'>待收货</font>"
					case 2:
						return "<font style='color: #d48c11'>待评价</font>"
					case 3:
						return "<font style='color: #d48c11'>已完成</font>"
					case -1:
						return "<font style='color: red'>已取消</font>"
				}
			},

			// 获取列表数据
			getList() {
				uni.showLoading({
					title:"加载中"
				})
				this.imgapi = this.$reqConfig.URLIMAGE
				this.$axios({
					url: "user/info/shopOrderList",
					method: "post",
					data: {
						pageNo: this.params.pageNo,
						pageSize: this.params.pageSize,
						type: this.params.type,
						status: this.params.status
					}
				}).then((res) => {
					//请求接口成功之后，判断加载状态，处理数据						
					if (res.result.pages >= this.params.pageNo) {
						this.params.pageNo++;
						if (this.ifBottomRefresh) {
							res.result.list.map(item => {
								item.snapshot = JSON.parse(item.snapshot)
							})
							this.orderList = this.orderList.concat(res.result.list)

							this.ifBottomRefresh = false
							console.log('222', this.orderList)
						} else {
							this.orderList = res.result.list
							this.orderList.map(item => {
								item.snapshot = JSON.parse(item.snapshot)
								item.snapshot[0].avatar = this.imgapi + item.snapshot[0].avatar
							})
						}
					} else {
						this.status = 'noMore'
					}
					uni.hideLoading()
					// if (this.params.pageNo >= res.result.pages) {
					// 	this.status = 'noMore'
					// }
				})
			},
			onClickItem(val) {
				this.current = val.currentIndex
				console.log(val)
			},
			scollSwiper(e) {
				/*
				 0待付款
				 1待收货
				 2待评价
				 3已完成
				 -1已取消
				 */
				this.cleanList()
				switch (e.detail.current) {
					case 0:
						this.params.status = ""
						break;
					case 1:
						this.params.status = "0"
						break;
					case 2:
						this.params.status = "1"
						break;
					case 3:
						this.params.status = "2"
						break;
					case 4:
						this.params.status = "3"
						break;
					case 5:
						this.params.status = "-1"
						break;
				}
				this.current = e.target.current
				this.getList()
			}
		}
	};
</script>
<style>
	.overview{
		color: #ababab;
		margin-top: 15rpx;
	}
	.num {
		float: right;
		color: #cccccc;
		font-size: 30rpx;
	}

	.titFont {
		font-size: 28rpx;
		color: #424041;
		width: 80%;
		height: 84rpx;
	}

	page {
		height: 100%;
	}

	/deep/ .tabControl {
		height: 10vh;
		background-color: #aaff00;
	}

	/deep/ .swiper {
		height: 90vh;
	}

	.page {
		padding-top: 200rpx;
		height: 100%;
	}

	.orderListbox {
		margin-bottom: 20rpx;
		width: 660rpx;
		background-color: #fff;
		border-radius: 20rpx;
		
		padding: 20rpx;
	}

	.between {
		padding-bottom: 15rpx;
		border-bottom: 0.5rpx solid #C4C4C4;
	}

	.between2 {
		display: flex;
		justify-content: space-between;
		width: 520rpx;
	}

	.orderListboximg {
		margin-top: 10rpx;
		border-radius: 20rpx;
		width: 130rpx;
		height: 130rpx;
		border: 2rpx solid #eee;
	}

	.storeAvatar {
		margin-right: 15rpx;
		height: 80rpx;
		width: 80rpx;
		border-radius: 50%;
	}

	.orderListxinxi {
		margin-top: 10rpx;
		margin-bottom: 15rpx;
		height: 130rpx;
		display: flex;
	}

	.orderListprice {
		margin-top: 15rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.paybtn {
		height: 70rpx;
		line-height: 70rpx;
		font-size: 28rpx;
		border-radius: 20rpx;
		transform: scale(0.9);
		background-color: #fff;
	}

	.balckborder {
		border: 1rpx solid #747474;
		color: #747474;
	}

	.redborder {
		border: 1rpx solid #e20f0f;
		color: #e20f0f;
	}

	.greenborder {
		border: 1rpx solid #3282c8;
		color: #3282c8;
	}

	.paybtnBox {
		display: flex;
	}

	.snapshot {
		text-align: left;
		margin-top: 20rpx;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		font-size: 25rpx;
		width: 460rpx;
	}
</style>
